<template>
	<view>
		<uni-head title="报案登记表"></uni-head>
		<view class="liucheng">
			<view class="titletext5">获取报案号流程</view>
			<view class="titletext6" @click="toliuchengDia">查看流程
				<image src="/static/img/lookliucheng.png"></image>
			</view>
		</view>
		<!-- 保险信息 -->
		<view style="background-color: #fff;">
			<view class="Detailsbox">
				<view class="titletext">{{initialdata.bx_name}}</view>
				<view class="information ">
					<view class="infobox flex">
						<view class="left">保险号：</view>
						<view class="right">{{initialdata.bd_no}}</view>
					</view>
					<view class="infobox flex">
						<view class="left">保障期限：</view>
						<view class="right">{{initialdata.start_time}}至{{initialdata.end_time}}</view>
					</view>
					<view class="infobox flex">
						<view class="left">投保人联系人：</view>
						<view class="right">{{initialdata.insure_contact}}</view>
					</view>
					<view class="infobox flex">
						<view class="left">投保人联系电话：</view>
						<view class="right">{{initialdata.insure_mobile}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 理赔说明 -->
		<view style="background-color: #fff;">
			<!-- 	<view class="explain">
				<view class="titlesm flex">
					<view class="blueshu"></view>
					<view class="shuoming">理赔说明</view>
				</view>
				
				<view class="explaininfo flex-space-between">
					<view class="left flex">
						<view class="imgbox">
							<image src="../../static/Icon/bianqian.png" mode=""></image>
						</view>
						<view class="wjname">理赔说明文件</view>
					</view>
					<view class="right flex">
						<view class="imgbox">
							<image src="../../static/Icon/xiazai.png" mode=""></image>
						</view>
						<view class="wjname">下载说明</view>
					</view>
				</view>
			</view> -->


		</view>
		<!-- 案件基本信息 -->
		<view style="background-color: #fff;">
			<view class="essential">
				<view class="titlesm flex">
					<view class="blueshu"></view>
					<view class="shuoming">按键基本信息</view>
				</view>
				<view class="Insured flex-space-between">
					<view class="left">出险被保人</view>
					<view class="right">
						<input type="text" style="width: 500upx;" disabled="true" :placeholder="initialdata.insure" />
					</view>
				</view>

				<view class="Insured flex-space-between">
					<view class="left">报案号</view>
					<view class="right">
						<input type="text" v-model="Submitdata.ba_no" placeholder="请输入报案号" />
					</view>
				</view>

				<view class="Insured flex-space-between">
					<view class="left">出险时间</view>
					<view class="right">
						<!-- 使用方式 -->
						<leeDatetime @change="bindLeeDateTimeChange" placeholder="请选择日期时间" :value="Submitdata.cx_timeS">
						</leeDatetime>
					</view>
				</view>


				<view class="Insured flex-space-between">
					<view class="left">出险地点</view>
					<view class="right">
						<view style="font-size: 28upx;" @click="isshow = true">{{regionjudgment}}</view>
						<addr :isshow="isshow" @close="close" @change="cxchange"></addr>
					</view>
				</view>
				<!-- 详细地址 -->
				<view style="padding: 20upx 0;border-bottom: 1px solid #EEEEEE;">
					<input type="text" v-model="Submitdata.cx_address" style="text-align: right;font-size: 28upx;"
						placeholder="请输入详细地址" />
				</view>

				<view class="Insured flex-space-between">
					<view class="left">出险时从事工作</view>
					<view class="right">
						<input type="text" v-model="Submitdata.cx_work" placeholder="请输入出险时从事工作" />
					</view>
				</view>

				<!-- 图片上传 -->
				<view class="relevant">
					<view class="titletext">相关图片</view>
					<scroll-view :scroll-x="true" class="scroll flex" style="width: 100%">
						<view class="shangchuan flex" v-for="(item, index) in Submitdata.scene_img" :key="index">
							<image :src="item" mode="" />
							<image @click="deleteimg(index)" src="../../static/Icon/shan.png" mode="" />
						</view>
						<view class="uppop scroll" @tap="upLoad">
							<image src="../../static/Icon/shangchuan.png" mode=""></image>
						</view>
					</scroll-view>
				</view>
				<!-- 出险类型 -->
				<view class="Insured flex-space-between" style="margin-top: 20upx;">
					<view class="left">出险类型</view>
					<view class="right">
						<picker mode="selector" :range='dangertype' @change="workchange">
							<view class="flex">
								<view class="congst">{{work.length==0?'请选择出险类型':work}}</view>
								<view class="zuojianto">
									<image src="../../static/Icon/zuojianto.png" mode=""></image>
								</view>
							</view>
						</picker>
					</view>
				</view>

				<!-- 事故描述 -->
				<view class="describe">
					<view class="texttitle">事故描述</view>
					<view class="">
						<textarea v-model="Submitdata.memo" placeholder="请详细描述事故内容"
							style="height: 100upx;width: 100%;font-size: 28upx;" />
					</view>
				</view>

			</view>
		</view>
		<!-- 报案人信息 -->
		<view style="background-color: #fff;">
			<view class="Reporter">
				<view class="titlesm flex">
					<view class="blueshu"></view>
					<view class="shuoming">报案人信息</view>
				</view>

				<!-- 报案人姓名 -->
				<view class="Insured flex-space-between">
					<view class="left">报案人姓名</view>
					<view class="right">
						<input type="text" v-model="Submitdata.ba_user" placeholder="请填写报案人姓名" />
					</view>
				</view>
				<!-- 报案人电话 -->
				<view class="Insured flex-space-between">
					<view class="left">报案人电话</view>
					<view class="right">
						<input type="text" v-model="Submitdata.ba_mobile" placeholder="请填写报案人电话" />
					</view>
				</view>
				<!-- 与出险人关系 -->
				<view class="Insured flex-space-between">
					<view class="left">与出险人关系</view>
					<view class="right">
						<input type="text" v-model="Submitdata.ba_relevance" placeholder="请填写与出险人关系" />
					</view>
				</view>
			</view>
		</view>
		<!-- 出险人 -->
		<view style="background-color: #fff;">
			<view class="Underwriter">
				<view class="titlesm flex">
					<view class="blueshu"></view>
					<view class="shuoming">出险人</view>
				</view>
				<view class="addclick" @click="addcxr">+添加出险人</view>
			</view>

		</view>
		<!-- 出险人列表 -->
		<view class="cxlist" v-show="Submitdata.user.length!=0">
			<view class="cxtitle">出险人列表（{{Submitdata.user.length}}）</view>
			<view class="listinfo flex" v-for="(item,index) in Submitdata.user" :key="index">
				<view class="left">
					<view class="cxname">姓名</view>
					<view class="cxname">身份证</view>
				</view>
				<view class="right">
					<view class="nameinfo">{{item.name}}</view>
					<view class="nameinfo">{{item.id_card}}</view>
				</view>
				<view class="shanchu" @click="cxrshanchu(index)">删除</view>
			</view>
		</view>
		<view style="width: 100%;height: 100upx;">

		</view>
		<!-- 底部固定 -->
		<view class="buttomfixed ">
			<view class="butbox flex">
				<view class="left" @click="qxclick">取消</view>
				<view class="right" @click="immediatelyReport" v-if="type==1">立即报案</view>
				<view class="right" @click="msmodify" v-else>立即修改</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<unipopup ref="popup" type="bottom" background-color="#fff">
			<view class="upopup">
				<view class="topbox">
					<view class="title flex-center">添加出险人</view>
					<view class="quxiao" @click="addquxiao">
						<image src="../../static/Icon/cuo.png" mode=""></image>
					</view>
				</view>
				<view style="margin: 0 24upx;">
					<view class="Insured flex-space-between">
						<view class="left">出险人姓名</view>
						<view class="right">
							<input type="text" value="" v-model="Insuredname" placeholder="请输入出险人姓名" />
						</view>
					</view>
					<view class="Insured flex-space-between">
						<view class="left">身份证</view>
						<view class="right">
							<input type="text" value="" v-model="Insuredid" placeholder="请输入出险人身份证号" />
						</view>
					</view>
					<view class="butbox flex-space-between">
						<view class="left" @click="addquxiao">取消</view>
						<view class="right" @click="addInsured">确认添加</view>
					</view>
				</view>
			</view>
		</unipopup>

		<!-- 取消返回上一页 -->
		<unipopup ref="qxpopup" type="center" background-color="#fff">
			<view class="backbox">
				<view class="topbox">是否返回上一页</view>
				<view class="buttombox flex-space-between">
					<view class="leftbox" @click="popquxiao">取消</view>
					<view class="rightbox" @click="quqdclick">确定</view>
				</view>
			</view>
		</unipopup>
		<unipopup ref="liuchengpopup" type="center" background-color="#fff">
			<view class="liuchengS">
				<view class="liuchengHeader">
					报案号获取流程
					<image class="imagecuo" src="../../static/Icon/cuo.png" @click="closelicuhengDia"></image>
				</view>
				<view class="liuchengtishi">
					<image src="/static/Icon/jingshi.png"></image>
					注意：必须先获取报案号方可提交报案登记
				</view>
				<scroll-view :scroll-top="0" scroll-y="true" class="liuchengBody">
					<view class="spanT">进入公众号搜索【<span style="font-weight: bold;">太平洋产险华南运营中心</span>】</view>
					<image src="../../static/img/liucheng1.jpg" mode="widthFix"></image>
					<view class="spanT">点击【<span style="font-weight: bold;">太平洋产险华南运营中心</span>】并关注公众号</view>
					<image src="../../static/img/liucheng2.jpg" mode="widthFix"></image>
					<!-- <view class="spanT">点击太平洋产险华南运营中心进入</view> -->
					<image src="../../static/img/liucheng3.jpg" mode="widthFix"></image>
					<view class="spanT">点击【<span style="font-weight: bold;">享服务</span>】选择【<span
							style="font-weight: bold;">95500客服</span>】</view>
					<image src="../../static/img/liucheng4.png" mode="widthFix"></image>
					<view class="spanT">输入【<span style="font-weight: bold;">转人工</span>】点击【<span
							style="font-weight: bold;">转人工</span>】服务</view>
					<image src="../../static/img/liucheng5.png" mode="widthFix"></image>
					<view class="spanT">输入【<span style="font-weight: bold;">非车险报案</span>】等待客服，按照要求提供报案材料即可，收到报案号才算报案成功。
					</view>
					<image src="../../static/img/liucheng6.png" mode="widthFix"></image>
				</scroll-view>
			</view>
		</unipopup>
	</view>
</template>

<script>
	import uniHead from "@/components/uni-dead/head.vue";
	import {
		oss_url,
		isObjEmpty
	} from '../../utils/tools.js'
	import {
		pathToBase64,
		base64ToPath,
	} from "@/static/js_sdk/gsq-image-tools/image-tools";
	import {
		chooseImage,
		IDcard,
		showToast,
		navTo
	} from '@/utils/method.js'
	import unipopup from '../../components/uni-popup/uni-popup.vue'
	import addr from '../../components/address/addr.vue'
	// import datatime from '../../components/my-datetime/my-datetime.vue'
	import leeDatetime from '../../components/lee-datetime/components/lee-datetime.vue'

	export default {
		components: {
			uniHead,
			unipopup,
			addr,
			leeDatetime
		},
		data() {
			return {
				dangertype: [], //出险类型
				id: '',
				danger: '',
				initialdata: {}, //初始数据
				isshow: false, //弹出
				pickerShow: false, //省市区
				Insuredname: '', //出险人姓名
				Insuredid: '', //出险人身份证
				InsuredArr: [], //出险人列表
				work: '',
				Submitdata: {
					id: '',
					ba_no: '', //报案号
					cx_time: '', //出险时间
					cx_timeS:'',
					cx_province: '', //省
					cx_city: '', //市
					cx_area: '', //区
					scene_img: [], //图片
					cx_address: '', //详细地址
					cx_work: '', //出险时的工作
					cx_classify: '', //出险类型
					memo: '', //事故描述
					ba_user: '', //报案人
					ba_mobile: '', //报案人联系方式
					ba_relevance: '', //与报案人关系
					user: []
				},
				resId: '', //回显数据
			}
		},
		computed: {
			regionjudgment() {
				if (this.Submitdata.cx_area.length == 0) {
					return '请选择地区'
				} else {
					return this.Submitdata.cx_province + this.Submitdata.cx_city + this.Submitdata.cx_area
				}
			}
		},
		onLoad(obj) {
			this.id = JSON.parse(obj.obj).id
			this.type = JSON.parse(obj.obj).type //1是列表项进来，其他是修改
			if (JSON.parse(obj.obj).type == 1) {
				// 列表进来
				this.report()
			} else {
				// 回显数据
				this.reportgetDetail()
			}
			console.log();

		},
		mounted() {
			this.$refs.liuchengpopup.open('top')
		},
		methods: {
			bindLeeDateTimeChange(e) {
				this.Submitdata.cx_timeS = e.text
				this.Submitdata.cx_time = e.value
				console.log(this.Submitdata.cx_time);
			},
			// 初始数据
			report() {
				this.ajax('report/report', {
					data: {
						id: this.id
					},
					success: (res) => {
						this.initialdata = res.msg
						this.dangertype = res.msg.classify
					}
				})
			},
			// 数据回显
			reportgetDetail() {
				this.ajax('report/getDetail', {
					data: {
						id: this.id
					},
					success: (res) => {
						console.log(res);
						// console.log(this.dangertype[this.Submitdata.cx_classify]);
						this.initialdata = res.msg.order
						this.Submitdata.cx_classify = this.dangertype[this.Submitdata.cx_classify]
						this.dangertype = res.msg.order.classify
						this.Submitdata = res.msg.info
						this.work = res.msg.order.classify[res.msg.info.cx_classify]


					}
				})
			},
			// 出险类型
			workchange(e) {
				let index = e.detail.value
				this.Submitdata.cx_classify = index
				this.work = this.dangertype[index]
				console.log(e);
			},
			//删除上传图片
			deleteimg(index) {
				this.Submitdata.scene_img.splice(index, 1)
			},
			// 点击上传图片
			//上传图片
			upLoad(e, index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera "], //从相册选择
					success: (res) => {
						console.log(res);
						var pic = res.tempFilePaths[0];
						pathToBase64(res.tempFilePaths[0])
							.then((base64) => {
								// 获取图片信息
								let timestamp = new Date().getTime();
								this.oss_upload({
									tempFilePaths: [pic]
								}, timestamp, {
									success: (res) => {
										var src =
											"https://djb.oss-cn-shanghai.aliyuncs.com/" +
											timestamp;
										// console.log(src);
										this.Submitdata.scene_img.push(src)
										// console.log(this.Submitdata.scene_img);
									},
									fail: (ress) => {
										this.toast("图片上传失败");
									},
								});
							})
							.catch((error) => {
								this.toast("图片解析失败");
							});
					},
				});
			},
			// 打开添加出险人
			addcxr() {
				this.$refs.popup.open('top')
			},
			//取消添加
			addquxiao() {
				this.$refs.popup.close()
			},
			// 打开取消弹框
			qxclick() {
				this.$refs.qxpopup.open('top')

			},
			// 关闭弹框
			popquxiao() {
				this.$refs.qxpopup.close()
			},
			// 返回
			quqdclick() {
				this.$refs.qxpopup.close()
				uni.navigateBack()
			},
			//确认添加出险人
			addInsured() {
				console.log();
				if (this.Insuredname && IDcard(this.Insuredid)) {
					this.Submitdata.user.push({
						name: this.Insuredname,
						id_card: this.Insuredid
					})
					this.Insuredname = ''
					this.Insuredid = ''
					this.$refs.popup.close()
					// console.log(this.Submitdata.user);
				} else if (this.Insuredname.length == 0) {
					showToast('请输入姓名')
				} else {
					showToast("请输入正确的身份证号码")
				}
			},
			// 删除出险人
			cxrshanchu(index) {
				this.Submitdata.user.splice(index, 1)
			},
			// 打开选择城市弹框
			close() {
				this.isshow = false
			},
			// 选择城市
			cxchange(res) {
				this.Submitdata.cx_province = res[0]
				this.Submitdata.cx_city = res[1]
				this.Submitdata.cx_area = res[2]
			},

			// 立即报案
			immediatelyReport() {
				if (this.Submitdata.ba_no == '') {
					showToast('请填写报案号')
				} else if (this.Submitdata.cx_time == '') {
					showToast('请填写出险时间')
				} else if (this.Submitdata.cx_city == '') {
					showToast('请填写出险地点')
				} else if (this.Submitdata.cx_address == '') {
					showToast('请填写详细地址')
				} else if (this.Submitdata.cx_work == '') {
					showToast('请填写出险时的工作')
				} else if (this.Submitdata.scene_img.length == 0) {
					showToast('请上传相关图片')
				} else if (this.Submitdata.work == '' || this.Submitdata.work == '请选择') {
					showToast('请填写出险类型')
				} else if (this.Submitdata.memo == '') {
					showToast('请填写事故类型')
				} else if (this.Submitdata.ba_user == '') {
					showToast('请填写报案人姓名')
				} else if (this.Submitdata.ba_mobile == '') {
					showToast('请填写报案人联系方式')
				} else if (this.Submitdata.ba_relevance == '') {
					showToast('请填写与报案人关系')
				} else if (this.Submitdata.user.length == 0) {
					showToast('请填写出险人')
				} else {
					this.Submitdata.id = this.id
					this.ajax('report/reportDo', {
						data: this.Submitdata,
						success: (res) => {
							console.log(res);
							if (res.code == 1) {
								let obj = {
									resid: res.msg,
									id: this.id
								}
								navTo('/pages/order/result?id=' + JSON.stringify(obj))
							} else {
								showToast(res.msg)
							}
						}
					})
				}

			},
			// 立即修改
			msmodify() {
				if (this.Submitdata.ba_no == '') {
					showToast('请填写报案号')
				} else if (this.Submitdata.cx_time == '') {
					showToast('请填写出险时间')
				} else if (this.Submitdata.cx_city == '') {
					showToast('请填写出险地点')
				} else if (this.Submitdata.cx_address == '') {
					showToast('请填写详细地址')
				} else if (this.Submitdata.cx_work == '') {
					showToast('请填写出险时的工作')
				} else if (this.Submitdata.scene_img.length == 0) {
					showToast('请上传相关图片')
				} else if (this.Submitdata.work == '' || this.Submitdata.work == '请选择') {
					showToast('请填写出险类型')
				} else if (this.Submitdata.memo == '') {
					showToast('请填写事故类型')
				} else if (this.Submitdata.ba_user == '') {
					showToast('请填写报案人姓名')
				} else if (this.Submitdata.ba_mobile == '') {
					showToast('请填写报案人联系方式')
				} else if (this.Submitdata.ba_relevance == '') {
					showToast('请填写与报案人关系')
				} else if (this.Submitdata.user.length == 0) {
					showToast('请填写出险人')
				} else {
					this.Submitdata.id = this.id
					this.ajax('report/reportEdit', {
						data: this.Submitdata,
						success: (res) => {
							console.log(res);
							if (res.code == 1) {
								let obj = {
									resid: res.msg,
									id: this.id
								}
								navTo('/pages/order/result?id=' + JSON.stringify(obj))
							} else {
								showToast(res.msg)
							}
						}
					})
				}
			},
			//流程
			toliuchengDia() {
				this.$refs.liuchengpopup.open('top')
			},
			closelicuhengDia() {
				this.$refs.liuchengpopup.close()
			},

		}
	}
</script>

<style scoped lang="less">
	.shu {
		height: 6upx;
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.04);
	}

	.Detailsbox {
		margin: 0 24upx;
		// box-shadow:0px -10px rgba(0,0,0,0.04);;
		padding-bottom: 38upx;
		background-color: #fff;

		.titletext {
			color: #000000;
			font-size: 32upx;
			padding-top: 36upx;
			font-weight: bold;
		}

		.information {
			color: #777777;
			font-size: 28upx;

			.infobox {
				margin-top: 14upx;
			}

			.left {
				min-width: 160upx;
			}


		}
	}

	.explain {
		margin: 20upx 24upx 0;
		padding-bottom: 38upx;

		.titlesm {
			padding-top: 28upx;
			font-size: 28upx;

			.blueshu {
				width: 6upx;
				height: 20upx;
				background: #5081FA;
				border-radius: 4upx;
				margin-right: 10upx;
			}
		}

		.explaininfo {
			height: 88upx;
			margin-top: 20upx;
			border-radius: 10upx;

			background-color: #FCFCFC;

			.left {
				.imgbox {
					width: 34upx;
					height: 38upx;
					margin-left: 24upx;

					image {
						width: 34upx;
						height: 38upx;
					}
				}

				.wjname {
					font-size: 28upx;
					margin-left: 18upx;
					color: #000000;
				}
			}

			.right {
				.imgbox {
					width: 28upx;
					height: 28upx;

					image {
						width: 28upx;
						height: 28upx;
					}
				}

				.wjname {
					font-size: 28upx;
					color: #5280F8;
					margin-left: 16upx;
					margin-right: 28upx;
				}
			}
		}
	}

	.essential {
		margin: 20upx 24upx 0;
		padding-bottom: 50upx;

		.titlesm {
			padding-top: 28upx;
			padding-bottom: 26upx;
			border-bottom: 1px solid #EEEEEE;
			font-size: 28upx;

			.blueshu {
				width: 6upx;
				height: 20upx;
				background: #5081FA;
				border-radius: 4upx;
				margin-right: 10upx;
			}
		}

		.Insured {
			padding: 20upx 0;
			border-bottom: 1px solid #EEEEEE;

			.left {
				color: #000000;
				font-size: 28upx;
			}

			.right {
				padding-top: 1upx;

				input {

					text-align: right;
					font-size: 28upx;
				}

				.congst {
					font-size: 28upx;
					margin-right: 10upx;
				}

				.zuojianto {
					width: 12upx;
					height: 22upx;
					margin-bottom: 20upx;

					// margin-right: 10upx;
					image {
						width: 12upx;
						height: 22upx;

					}
				}
			}
		}

		.relevant {
			.titletext {
				padding: 20upx 0;
				color: #000000;
				font-size: 28upx;
			}

			.shangchuan {
				display: inline-block;
				width: 160rpx;
				height: 160rpx;
				margin-right: 18rpx;
				border-radius: 10rpx;
				position: relative;

				image:nth-child(1) {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}

				image:nth-child(2) {
					position: absolute;
					top: 4rpx;
					right: 4rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.uppop {
				width: 156upx;
				height: 156upx;
				border: 1px solid #DDDDDD;
				display: inline-block;
				border-radius: 10upx;
				position: relative;

				image {
					width: 36upx;
					height: 32upx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.describe {
			padding-bottom: 26upx;
			border-bottom: 1px solid #EEEEEE;

			.texttitle {
				padding: 20upx 0;
				color: #000000;
				font-size: 28upx;
			}
		}
	}

	.Reporter {
		margin: 20upx 24upx 0;
		padding-bottom: 50upx;

		.titlesm {
			padding-top: 28upx;
			padding-bottom: 26upx;
			border-bottom: 1px solid #EEEEEE;
			font-size: 28upx;

			.blueshu {
				width: 6upx;
				height: 20upx;
				background: #5081FA;
				border-radius: 4upx;
				margin-right: 10upx;
			}
		}

		.Insured {
			padding: 20upx 0;
			border-bottom: 1px solid #EEEEEE;

			.left {
				color: #000000;
				font-size: 28upx;
			}

			.right {
				padding-top: 1upx;

				input {
					text-align: right;
					font-size: 28upx;
				}

				.congst {
					font-size: 28upx;
					margin-right: 10upx;
				}

				.zuojianto {
					width: 12upx;
					height: 22upx;
					margin-bottom: 20upx;

					// margin-right: 10upx;
					image {
						width: 12upx;
						height: 22upx;

					}
				}
			}
		}
	}

	.Underwriter {
		margin: 20upx 24upx 0;
		padding-bottom: 50upx;

		.titlesm {
			padding-top: 28upx;
			padding-bottom: 26upx;
			border-bottom: 1px solid #EEEEEE;
			font-size: 28upx;

			.blueshu {
				width: 6upx;
				height: 20upx;
				background: #5081FA;
				border-radius: 4upx;
				margin-right: 10upx;
			}
		}

		.addclick {
			margin-top: 40upx;
			background-color: #F9F9F9;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			color: #000000;
			border-radius: 10upx;
		}
	}

	.cxlist {
		margin: 20upx 24upx 0;
		padding-bottom: 50upx;
		border-radius: 10upx;

		.cxtitle {
			font-size: 28upx;
			color: #000000;
			padding: 20upx;
		}

		.listinfo {
			background-color: #fff;
			padding: 30upx 0;
			font-size: 28upx;
			line-height: 50upx;
			margin-bottom: 20upx;

			.left {
				margin-left: 24upx;
				margin-right: 70upx;
			}

			.shanchu {
				margin-left: 140upx;
				color: #F86768;
			}
		}
	}

	.upopup {
		background-color: #fff;

		.topbox {
			padding: 26upx 0;
			position: relative;
			background-color: #F9F9F9;

			.title {
				color: #000000;
				font-size: 36upx;
			}

			.quxiao {
				width: 24upx;
				height: 24upx;
				position: absolute;
				top: 28upx;
				right: 50upx;

				image {
					width: 24upx;
					height: 24upx;
				}
			}
		}

		.Insured {
			padding: 40upx 0;
			border-bottom: 1px solid #EEEEEE;

			.left {
				color: #000000;
				font-size: 28upx;
			}

			.right {
				padding-top: 1upx;

				input {
					text-align: right;
					font-size: 28upx;
				}

				.congst {
					font-size: 28upx;
					margin-right: 10upx;
				}

				.zuojianto {
					width: 12upx;
					height: 22upx;
					margin-bottom: 20upx;

					// margin-right: 10upx;
					image {
						width: 12upx;
						height: 22upx;

					}
				}
			}
		}

		.butbox {
			margin-top: 60upx;
			padding-bottom: 50upx;

			.left,
			.right {
				width: 320upx;
				height: 88upx;
				border-radius: 10upx;
				text-align: center;
				line-height: 88upx;
			}

			.left {
				color: #5280F8;
				border: 1px solid #5280F8;
			}

			.right {
				color: #fff;
				background: linear-gradient(180deg, #4EB4FE 0%, #5280F8 100%);
			}
		}
	}

	.buttomfixed {
		position: fixed;
		bottom: 0;
		left: 0;

		.butbox {

			.left,
			.right {
				text-align: center;
				line-height: 100upx;
				height: 100upx;
				font-size: 32upx;
			}

			.left {
				width: 298upx;
				color: #333333;
				background-color: #fff;
			}

			.right {
				width: 452upx;
				color: #FFFFFF;
				background: linear-gradient(180deg, #4EB4FE 0%, #5280F8 100%);
			}
		}
	}

	.backbox {
		background-color: #fff;
		width: 600upx;
		height: 300upx;

		.topbox {
			width: 600upx;
			padding-top: 80upx;
			text-align: center;
		}

		.buttombox {
			margin-top: 80upx;

			.leftbox,
			.rightbox {
				width: 300upx;
				height: 100upx;
				text-align: center;
				font-size: 32upx;
				line-height: 100upx;
			}

			.leftbox {
				background-color: #fff;
			}

			.rightbox {
				color: #fff;
				background: linear-gradient(180deg, #4EB4FE 0%, #5280F8 100%)
			}
		}
	}

	.liucheng {
		height: 58px;
		background: rgba(255, 255, 255, 1);
		margin: 20rpx 0;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.titletext5 {
			font-size: 16px;
			font-weight: bold;
			line-height: 25px;
			color: #000000;
			display: flex;
			align-items: center;
			text-align: right;
		}

		.titletext6 {
			line-height: 25px;
			font-size: 14px;
			color: #5181F8;
			display: flex;
			align-items: center;
			text-align: right;

			image {
				margin-left: 10rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.liuchengS {
		width: 342px;
		height: 80vh;
		background: rgba(255, 255, 255, 1);
		opacity: 1;
		border-radius: 10px;

		.liuchengHeader {
			padding-top: 20rpx;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 25px;
			color: #000000;
			text-align: center;
			position: relative;

			.imagecuo {
				position: absolute;
				right: 20rpx;
				top: 30rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}

		.liuchengtishi {
			height: 30px;
			background: #FFF7F3;
			margin: 10px 0;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			color: #E95C4B;
			font-size: 14px;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.liuchengBody {
			margin: 15px;
			height: 65vh;

			.spanT {
				line-height: 18px;
				font-size: 15px;
				padding: 10px 0;
				margin-bottom: 10px;
			}

			image {
				width: 92%;
				height: 100%;
			}
		}
	}
</style>